<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- html结构：  外层div .sidebar 
		     html结构标记：aside元素 语义化元素 表示：左栏  侧边栏 广告
			 有利于SEO优化
			 通常代替div+id/class
		                内层ul.ul_sidebar  li*10
						内容参照京东左栏第一个
			 css结构：内部引入方式
			         通配选择器---合理添加
					 aside外层div.sidebar（他俩一样）  235*460  背景色自定
					 内层每个li加宽高235*46
					 内层的文本 垂直居中 对齐  文字16px
					 鼠标移动上去li  背景色改变
		 -->
		 <style>
			 *{
			 	font: 16px "微软雅黑";
			 	 /* 去掉无序列表样式  针对一项列表项标记*/
			 	list-style-type:none;
			 	 /* 去掉无序列表样式  针对三项 1.去列表项标记 list-style-type
			 				                2.列表项位置 list-style-position: ;
			 								3.列表项图片 list-style-image: ;
											所有效果 去掉样式*/
				list-style: none;
				margin: 0;
				padding: 0;
				
			 }
			 aside{
				 width: 235px;
				 height: 460px;
				 background: #dcdcdc;
				 /* 盒子模型：外边距 */
				 margin: 20px 200px;
			 }
			 aside ul.ul_sidebar li{
				                 width: 235px;
				 				 height: 46px;
				 				 text- align: center;
				 				 line-height: 2.875rem;
								 /* 挂靠位【固定】 使用相对定位 */
								 position: relative;
				 				 
				 }
			 aside ul.ul_sidebar li:hover{
				 				 background: #feed2a;
				 }
			 
			 
			 
			 div.sidebar{
				 width: 235px;
				 height: 460px;
				 background: #c1c1c1;
			 }
			 div.sidebar ul.ul_sidebar li{
				 width: 235px;
				 height: 46px;
				 text- align: center;
				 font-size: 16px;
				 font-family: 微软雅黑;
				 line-height: 2.875rem;
			 }
			 div.sidebar ul.ul_sidebar li:hover{
				 background: #919191;
			 }
			 /* 挂靠点【活动】 使用绝对定位 按照父级位置定位 */
			 aside ul.ul_sidebar div.out{
				 width: 400px;
				 height: 460px;
				 border: 1px solid red;
				 /* 绝对定位 */
				 position: absolute;
				 left: 435px;
				 /* 默认隐藏  搞不定【jQuery】*/
				 display: block;
			 }
			 
			 
		 </style>
		 <div class="sidebar">
		 	<ul class="ul_sidebar">
		 		<li>家用电器</li>
		 		<li>手机 / 运营商 / 数码</li>
		 		<li> 电脑 / 办公 / 文具用品</li>
		 		<li>家居 / 家具 / 家装 / 厨具</li>
		 		<li> 男装 / 女装 / 童装 / 内衣</li>
		 		<li> 美妆 / 个护清洁 / 宠物</li>
		 		<li> 女鞋 / 箱包 / 钟表 / 珠宝</li>
		 		<li>男鞋 / 运动 / 户外</li>
		 		<li> 房产 / 汽车 / 汽车用品</li>
		 		<li>母婴 / 玩具乐器</li>
		 	</ul>
		 </div>
		 
		 <aside>
			 <ul class="ul_sidebar">
				 <!-- 弹出框 模式：div+别名 -->
				 <div class="out"></div>
			 	<li>家用电器</li>
			 	<li>手机 / 运营商 / 数码</li>
			 	<li> 电脑 / 办公 / 文具用品</li>
			 	<li>家居 / 家具 / 家装 / 厨具</li>
			 	<li> 男装 / 女装 / 童装 / 内衣</li>
			 	<li> 美妆 / 个护清洁 / 宠物</li>
			 	<li> 女鞋 / 箱包 / 钟表 / 珠宝</li>
			 	<li>男鞋 / 运动 / 户外</li>
			 	<li> 房产 / 汽车 / 汽车用品</li>
			 	<li>母婴 / 玩具乐器</li>
			 </ul>
		 </aside>
	</body>
</html>